<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.moveBox{
				width: 100px;
				height: 5px;
				background-color: #FF0000;/*背景色 1,直接写英文 2,写RGB数字,三个16进制值组成*/
				/*animation:动画  动画的三个参数:1,动画名称 2动画时间 3,无限次的循环*/
				animation: mymove 100s infinite;/*infinite 无限循环*/
			}
			/*keyframes:关键帧 + 动画名称  由第一帧到关键帧(最后一帧) 中间帧都是动画引擎自己实现*/
			@keyframes mymove{
				from{width: 0px};        /*第一帧*/
				to{width: 300px;}        /*关键帧--最后一帧*/
			}
			.trasitionBox{
				width: 100px;
				height: 100px;
				background-color: darkgreen;
				transition: width 5s ;   /*transition:拉伸,宽度,持续2s*/
			}
			.trasitionBox:hover{         /*触发动画:鼠标移到上面,移除自动恢复*/
				width: 300px;            /*动画,从width=100,持续2s,拉伸到width=300*/
			}
			ul{                          /*ul + li结构实现页面上菜单*/
				list-style: none;        /*ul默认每个选项li前面增加一个点,初始样式,去掉点修饰*/
			}
			li{                          /*条目 一个菜单*/
				float: left;             /*li默认是换行标签,不让换行,浮动居左,连在后面,超出部分自动换行*/
				margin-right: 15px;      /*li之间空15像素*/
				background-color: hotpink;
				padding: 5px 10px 5px 10px;
				/*浏览器自己去扩充的动画,-webkit谷歌chrome 浏览器兼容性*/
				/*transform变形  skewX: X方向进行倾斜角度30度,度的单位是deg必须写,里面的内容也会倾斜*/
				-webkit-transform: skewX(30deg);
			}
			li:hover{                    /*不能有空格,鼠标移入执行,鼠标移出还原*/
				background-color: aqua;  /*换一个移入移除的背景色*/
			}
			a{                           /*a链接标签,默认文字是有下划线,链接点击是紫色,没点击过是默认颜色*/
				text-decoration: none;   /*文字修饰:none去掉文字修饰*/
				color: white;            /*有了背景色,文字显示白色,比较突显*/
				/*上面的动画会造成文字的倾斜,倾斜回来,反着转-30度*/
				-webkit-transform: skewX(-30deg);/*纠正文字的倾斜*/
				display: block;          /*改变a标签性质,不然进行换行,改成块结构,配合上一句动画把字正过来*//*不换行,让文字正过来*/
			}
		</style>
	</head>
	<body>
		<div>移动效果: </div>
		<div class="moveBox"></div>
		<div>拉伸效果: </div>
		<div class="trasitionBox"></div>
		
		<div>菜单效果: </div>
		<div>
			<ul>
				<li><a href="http://www.sina.com.cn"target="_blank">新浪新闻</a></li>
				<li><a href="http://toutiao.com"target="_blank">今日头条</a></li>
				<li><a href="http://www.baidu.com"target="_blank">百度新闻</a></li>
				<li><a href="http://www.fh.com.com"target="_blank">凤凰卫视</li>
			</ul>
		</div>
	</body>
</html>
